<template>
  <div class="addAsthmaTemplate-container">
    <el-form label-width="100px" ref="formRef" :model="form">
      <section class="info-content">
        <el-row :gutter="20">
          <el-col :span="8">
            <xm-f-radio
              quick
              prop="type"
              v-model="form.type"
              label="模板类型"
              :options="templateTypes"
            ></xm-f-radio>
          </el-col>
          <el-col :span="8">
            <xm-f-intput
              quick
              prop="title"
              v-model="form.title"
              label="模板名称:"
            ></xm-f-intput>
          </el-col>
          <el-col :span="8">
            <xm-f-intput
              quick
              prop="diseaseType"
              v-model="form.diseaseType"
              label="疾病类型:"
            ></xm-f-intput>
          </el-col>
        </el-row>
      </section>
      <section class="info-content">
        <el-form label-width="130px">
          <xm-f-intput
            type="textarea"
            v-model="form.mainSuit"
            label="主诉内容："
            foots="模板"
          >
            <el-button
              class="foots"
              @click="toSavePartTempate('主诉', 'mainSuit')"
            >
              快速存为模板
            </el-button>
          </xm-f-intput>
          <xm-f-intput
            type="textarea"
            v-model="form.historyPresent"
            label="现病史内容："
            foots="模板"
          >
            <el-button
              class="foots"
              @click="toSavePartTempate('现病史', 'historyPresent')"
            >
              快速存为模板
            </el-button>
          </xm-f-intput>
          <xm-f-intput type="textarea" v-model="form.past" label="既往史内容：">
            <el-button
              class="foots"
              @click="toSavePartTempate('既往史', 'past')"
            >
              快速存为模板
            </el-button>
          </xm-f-intput>
          <xm-f-intput
            type="textarea"
            v-model="form.allergy"
            label="过敏史内容："
          >
            <el-button
              class="foots"
              @click="toSavePartTempate('过敏史', 'allergy')"
            >
              快速存为模板
            </el-button>
          </xm-f-intput>
          <xm-f-intput
            type="textarea"
            v-model="form.personal"
            label="个人史内容："
          >
            <el-button
              class="foots"
              @click="toSavePartTempate('个人史', 'personal')"
            >
              快速存为模板
            </el-button>
          </xm-f-intput>
          <xm-f-intput
            type="textarea"
            v-model="form.family"
            label="家族史内容："
          >
            <el-button
              class="foots"
              @click="toSavePartTempate('家族史', 'family')"
            >
              快速存为模板
            </el-button>
          </xm-f-intput>
          <xm-f-intput
            type="textarea"
            v-model="form.signs"
            label="体格检查内容："
          >
            <el-button
              class="foots"
              @click="toSavePartTempate('体格检查', 'signs')"
            >
              快速存为模板
            </el-button>
          </xm-f-intput>
          <xm-f-intput
            type="textarea"
            v-model="form.auxiliaryExamination"
            label="辅助检查内容："
          >
            <el-button
              class="foots"
              @click="toSavePartTempate('辅助检查', 'auxiliaryExamination')"
            >
              快速存为模板
            </el-button>
          </xm-f-intput>
          <xm-f-intput
            type="textarea"
            v-model="form.treatmentOpinion"
            label="治疗意见内容："
          >
            <el-button
              class="foots"
              @click="toSavePartTempate('治疗意见', 'treatmentOpinion')"
            >
              快速存为模板
            </el-button>
          </xm-f-intput>
        </el-form>
      </section>
    </el-form>
    <section class="info-content foot">
      <el-button type="primary" @click="toSave">保存整体方案</el-button>
      <el-button @click="toBack">取消</el-button>
    </section>
  </div>
</template>
<script>
  import emr from '@/hooks/emr.vue'
  import { toRefs, ref, onBeforeMount } from 'vue'
  // @/views/reception/components/actionPlan
  import { useRouter, useRoute } from 'vue-router'
  import {
    saveIntegralTemplate,
    savePartTemplate,
    loadPartTemplateInfo,
    loadIntegralTemplateInfo,
  } from '@/api/modules/emr'
  import { ElMessageBox } from 'element-plus'
  import common from '@/utils/common'
  export default {
    name: 'addNormalTempate',
    setup() {
      const form = ref({})

      const formRef = ref(null)
      const toSave = async function () {
        formRef.value.validate((valid) => {
          if (valid) {
            const type = form.value.type === '公有' ? 0 : 1
            const tmp = { ...form.value, type, id: route.query.id }
            common.XmLoading(true)
            saveIntegralTemplate(tmp)
              .then((res) => {
                common.XmLoading()
                common.XmMessage(0, res.message)
                toBack()
              })
              .catch(() => common.XmLoading())
          } else {
            ElMessageBox.confirm('请将最上方选项补充完毕')
          }
        })
      }
      const toSavePartTempate = function (model, key) {
        formRef.value.validate((valid, msg) => {
          console.log(msg)
          if (valid) {
            ElMessageBox.confirm(`是否将该项保存为${model}独立模板`, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'success',
            }).then(() => {
              const type = form.value.type === '公有' ? 0 : 1
              const tmp = {
                ...form.value,
                type,
                model,
                value: form.value[key],
                id: route.query.id,
              }
              common.XmLoading(true)
              savePartTemplate(tmp)
                .then((res) => {
                  common.XmLoading()
                  common.XmMessage(0, res.message)
                  // toBack()
                })
                .catch(() => common.XmLoading())
            })
          } else {
            ElMessageBox.confirm('请将最上方选项补充完毕')
          }
        })
      }
      const router = useRouter()
      const toBack = function () {
        router.go(-1)
      }

      const route = useRoute()
      onBeforeMount(() => {
        if (route.query.id) toLoad(route.query.id, route.query.isPart)
      })

      const toLoad = function (id, isPart) {
        console.log('id =' + JSON.stringify(id))
        console.log('isPart =' + JSON.stringify(isPart))
        let promise = null
        if (isPart === '1') {
          promise = loadPartTemplateInfo({ id })
        } else {
          promise = loadIntegralTemplateInfo({ id })
        }
        promise.then((res) => {
          form.value.type = res.data.type === 0 ? '公有' : '私有'
          form.value.title = res.data.title
          form.value.diseaseType = res.data.title
          if (isPart === '1') {
            const tmp = {
              主诉: 'mainSuit',
              现病史: 'historyPresent',
              既往史: 'past',
              过敏史: 'allergy',
              个人史: 'personal',
              家族史: 'family',
              体格检查: 'signs',
              辅助检查: 'auxiliaryExamination',
              治疗意见: 'treatmentOpinion',
            }
            form.value[tmp[res.data.model]] = res.data.value
          } else {
            form.value = res.data
          }
        })
      }

      return {
        form,
        toSave,
        toBack,
        formRef,
        toSavePartTempate,
        // rules,
        ...toRefs(emr()),
      }
    },
  }
</script>
<style lang="scss" scoped>
  @import '@/styles/mixin.scss';
  .addAsthmaTemplate-container {
    .info-content {
      margin: 22px;
      background-color: white;
      padding: 15px;
      .foots {
        margin: 0 24px;
      }
    }
    .foot {
      display: flex;
      justify-content: flex-end;
    }
  }
</style>
